<template>  
  <view class="container">  

    <input  
      v-model="phoneNumber"  
      class="input"  
      placeholder="请输入手机号"  
      type="text"  
    />  
    <view class="password-container">
      <input  
        v-model="password"  
        class="input"  
        :type="showPassword ? 'text' : 'password'"  
        placeholder="请输入密码" 
      />
      <text class="password-icon" @click="togglePassword">
        <text class="iconfont" :class="showPassword ? 'icon-eye-open' : 'icon-eye-close'"></text>
      </text>
    </view>
    
    <button class="login-button" @click="handleLogin">登录</button>  
    
    <view class="footer">  
      <text class="link" @click="gotoRegister">注册账号</text>  
      <text class="link" @click="gotoResetPassword">忘记密码</text>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      phoneNumber: '',  
      password: '',  
      showPassword: false,
    };  
  },  
  methods: {  
    handleLogin() {  
      if (this.phoneNumber === '' || this.password === '') {  
        uni.showToast({  
          title: '手机号或密码不能为空',  
          icon: 'none'  
        });  
        return;  
      }  
      
      // 这里可以填入登录逻 
      uni.showToast({  
        title: '登录成功',  
        icon: 'success'  
      });  
      // 登录成功后的逻辑， 
    },  
    gotoRegister() {  
      uni.navigateTo({  
        url: '/pages/login/register/register' 
      });  
    },  
   gotoResetPassword() {
     uni.navigateTo({  
       url: '/pages/login/forgetPassword/forgetPassword'  
     });  
   },
   togglePassword() {
     this.showPassword = !this.showPassword;
   },
  }  
};  
</script>  

<style>  
.container {  
  flex: 1;  
  justify-content: center;  
  align-items: center;  
  padding: 20px;  
  background-color: #ffffff;  
}  

.title {  
  font-size: 24px;  
  margin-bottom: 30px;  
  color: #333333;  
}  

.input {  
  width: 100%;  
  padding: 10px;  
  margin-bottom: 15px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  

.login-button {  
  width: 100%;  
  padding: 12px;  
  background-color: #007AFF; /* 按钮背景色 */  
  color: white; /* 按钮字体颜色 */  
  border: none;  
  border-radius: 5px; /* 圆角按钮 */  
  font-size: 18px;  
}  

.footer {  
  display: flex;  
  justify-content: space-between;  
  margin-top: 20px;  
  width: 100%;  
}  

.link {  
  color: #007AFF; /* 链接颜色 */  
  font-size: 14px;  
  cursor: pointer;  
}  

.password-container {
  position: relative;
  width: 100%;
}

.password-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  padding: 5px;
  z-index: 1;
}

/* 如果使用自定义图标字体，需要先引入相应的字体文件 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_xxx.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}  
</style> */
/* <!-- <template>  
  <view class="container">  

    <input  
      v-model="phoneNumber"  
      class="input"  
      placeholder="请输入手机号"  
      type="text"  
    />  
    <view class="password-container">
      <input  
        v-model="password"  
        class="input"  
        :type="isPasswordVisible ? 'text' : 'password'"  
        placeholder="请输入密码"  
      />
      <image 
        class="eye-icon" 
        :src="isPasswordVisible ? '/assets/eye-open.png' : '/assets/eye-closed.png'" 
        @click="togglePasswordVisibility"
      />
    </view>
    
    <button class="login-button" @click="handleLogin">登录</button>  
    
    <view class="footer">  
      <text class="link" @click="gotoRegister">注册账号</text>  
      <text class="link" @click="gotoResetPassword">忘记密码</text>  
    </view>  
  </view>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      phoneNumber: '',  
      password: '',  
      isPasswordVisible: false,  // 控制密码可见性的状态  
    };  
  },  
  methods: {  
    handleLogin() {  
      if (this.phoneNumber === '' || this.password === '') {  
        uni.showToast({  
          title: '手机号或密码不能为空',  
          icon: 'none'  
        });  
        return;  
      }  
      
      uni.showToast({  
        title: '登录成功',  
        icon: 'success'  
      });  
    },  
    togglePasswordVisibility() {  
      this.isPasswordVisible = !this.isPasswordVisible;  // 切换密码可见性  
    },
    gotoRegister() {  
      uni.navigateTo({  
        url: '/pages/login/register/register' 
      });  
    },  
    gotoResetPassword() {
      uni.navigateTo({  
        url: '/pages/login/forgetPassword/forgetPassword'  
      });  
    }  
  }  
};  
</script>  
<style>  
.container {  
  flex: 1;  
  justify-content: center;  
  align-items: center;  
  padding: 20px;  
  background-color: #ffffff;  
}  

.input {  
  width: 100%;  
  padding: 10px;  
  margin-bottom: 15px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  

.password-container {
  position: relative;
  width: 100%;
}

.eye-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.login-button {  
  width: 100%;  
  padding: 12px;  
  background-color: #007AFF;  
  color: white;  
  border: none;  
  border-radius: 5px;  
  font-size: 18px;  
}  

.footer {  
  display: flex;  
  justify-content: space-between;  
  margin-top: 20px;  
  width: 100%;  
}  

.link {  
  color: #007AFF;  
  font-size: 14px;  
  cursor: pointer;  
}  
</style> --> 